<template>
  <div class="strut-div">
    <!-- <div style="height: calc(100% - 30px); "> -->
    <div :id="config.option.id" class="strut-div"></div>
    <!-- </div> -->
  </div>
</template>

<script>
  import echarts from 'echarts';
import autoHover from '../../util/autoHover.js';
export default {
  name: 'CommonLineChart',
  props: ['config'],
  data() {
    return {
      chart: null,
      timeTicket: null
    };
  },
  methods: {
    initChart() {
		if (this.timeTicket) {
			autoHover.stopHover(this.timeTicket);
		}
      let option = {
        grid: {
          left: 50,
          top: 40,
          right: 30,
          bottom: 40
        },
        legend: {
          data: [],
          right: 20,
          textStyle: {
            color: '#E9F4FF'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: '' // 默认为直线，可选为：'line' | 'shadow' | ''空值没背影
          }
          // 						formatter:(params, ticket, callback)=>{
          // 							console.log(params);
          // 							let htmlString = "";
          // 							htmlString = ""
          // 							+ params[0].name
          // 							+ "<br>"
          // 							+ params[0].value + " " + this.config.option.x1.title
          // 							+ "<br>"
          // 							+ params[1].value + " " + this.config.option.x2.title ;
          //
          // 							return htmlString;
          // 						}
        },
        xAxis: {
          type: 'category',
          boundaryGap: this.config.option.boundaryGap || false,
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            interval: 0,
            fontSize: 15,
            rotate: this.config.option.xRotate || 0
          }
        },
        yAxis: [],
        series: [],
        textStyle: {
          color: '#E9F4FF',
          fontSize: 14
        }
      };

      for (var i = 0; i < this.config.option.y.length; i++) {
        let item = this.config.option.y[i];

        option.series.push({
          type: 'line',
          smooth: item.smooth || false,
          color: item.startColor,
          lineStyle: {
            color: item.startColor
          },
          markLine: {
            lineStyle: {
              type: 'dashed'
            }
          },

          areaStyle: {
            origin: 'start',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: item.startColor // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: item.endColor // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        });

        if (item.axis) {

          var yAxis = {
            axisLabel: {
              fontSize: item.axis.fontSize || 14
            },
            type: 'value',
            splitLine: {
              lineStyle: {
                color: 'rgba(10,61,102,0.5)'
              }
            },
            splitNumber: item.axis.splitNumber || 5,
            axisLine: {
              show: false
            },
            min: item.axis.min,
            max: item.axis.max,
            offset:item.axis.offset || 0
          };
          if (this.config.option.y[i].axis.name) {
            yAxis.name = this.config.option.y[i].axis.name;
          }
          if (item.axis.label) {
            yAxis.axisLabel.formatter = item.axis.label;
          }

          option.yAxis.push(yAxis);
          option.series[i].yAxisIndex = option.yAxis.length - 1;
        }
      }
      option.xAxis.data = this.config.option.x;

      for (var i = 0; i < this.config.option.y.length; i++) {
        option.series[i].data = this.config.option.y[i].data;
        option.series[i].name = this.config.option.y[i].title;
        option.legend.data.push(this.config.option.y[i].title);
      }

      this.chart.setOption(option);
      this.timeTicket = autoHover.autoHover(this.chart, option, option.xAxis.data.length);
    },
    refreshChart() {}
  },
  mounted() {
    this.chart = echarts.init(document.getElementById(this.config.option.id));
  },
  beforeDestroy() {
    autoHover.stopHover(this.timeTicket);
  }
};
</script>

<style scoped lang="scss" type="text/scss">
  .dual-area-title {
  height: 30px;
  line-height: 30px;

  > span {
    float: right;
    margin-left: 20px;
    font-size: 13px;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 5px;
      border: 1px solid yellow;
      top: 11.5px;
      left: -13px;
    }

    &:first-child::before {
      border-color: #ff8a00;
    }

    &:last-child::before {
      border-color: #007187;
    }
  }
}
</style>
